<template>
  <TopNavComponent/>
  <SwiperComponent :images="banners"/>
  <div class="nav">
    <div class="nav-item" @click="onItem(item.id)" v-for="item in navData" :key="item.id">
      <img :src="item.image" alt="">
      <span>{{ item.text }}</span>
    </div>
  </div>
  <div class="info" @click="onBeautyInfo">
    <h3>美甲咨询</h3>
    <p>年会不能错过的款,美呆了~</p>
    <span class="iconfont icon-jiantouyou"></span>
  </div>
  <div class="recommend">
    <div class="hot">
      <h3>热门活动后</h3>
    </div>
    <div class="opt">
      <h3>优选店铺</h3>
    </div>
  </div>
  <RollComponent :rollInfo="newShopInfo">
    <div class="new-shop-content" v-if="newGoodsLoading">
      <div class="new-shop-item" v-for="item in newGoods" :key="item.id">
        <img :src="item.image" alt=""/>
        <p class="new-shop-title">{{ item.title }}</p>
        <span class="new-shop-price">{{ item.price }}/月</span>
      </div>
    </div>
    <div class="skeleton-new" v-else>
      <div class="skeleton-item">
        <van-skeleton-image class="image"/>
        <van-skeleton-paragraph/>
        <van-skeleton-paragraph/>
      </div>
      <div class="skeleton-item">
        <van-skeleton-image class="image"/>
        <van-skeleton-paragraph/>
        <van-skeleton-paragraph/>
      </div>
    </div>
  </RollComponent>
  <div class="ad">
    <img src="@/assets/images/onlineimg.png" alt="">
  </div>
  <RollComponent :rollInfo="personInfo">
    <div class="person-content">
      <div class="person-item" v-for="(item,index) in personSore" :key="index">
        <img :src="item.image" alt="">
        <p>{{ item.name }}</p>
        <span>{{ item.desc }}</span>
      </div>
    </div>
  </RollComponent>
  <div class="recommend-main">
    <CardComponent :recommendTitle="recommendTitle" :cardData="recommendGoods" v-if="recommendLoading"/>
    <van-empty v-else image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80" description="等待加载"/>
  </div>
</template>

<script setup lang="ts">
import TopNavComponent from "@/components/TopNavComponent.vue";
import RollComponent from "@/components/RollComponent.vue";
import SwiperComponent from "@/components/SwiperComponent.vue";
import {getCarousel, getNewGoods, getPersonStore, getRecommend} from "@/api/Home/home.ts";
import {onMounted, reactive, ref} from "vue";
import nav1 from "@/assets/images/nav1.png";
import nav2 from "@/assets/images/nav2.png";
import nav3 from "@/assets/images/nav3.png";
import nav4 from "@/assets/images/nav4.png";
import nav5 from "@/assets/images/nav5.png";
import {useRouter} from "vue-router";
import CardComponent from "@/components/CardComponent.vue";


// 用于轮播图组件的数据格式
interface IImage {
  image: string,
  title: string,
  url: string
}

const banners = ref<IImage[]>([])
const router = useRouter()
const navData: any = [
  {
    id: 1,
    text: '转让出租',
    image: nav1
  },
  {
    id: 2,
    text: '招聘求职',
    image: nav2
  },
  {
    id: 3,
    text: '流行产品',
    image: nav3
  },
  {
    id: 4,
    text: '培训课程',
    image: nav4
  },
  {
    id: 5,
    text: '批发进货',
    image: nav5
  }
]

interface INewGoods {
  id: number,
  image: any,
  title: string,
  price: string | number,
}

interface IPersonStore {
  desc: string,
  name: string,
  image: string,
}

interface ICardData {
  id: number,
  image: any,
  title: string,
  price: string,
}

const newGoods = ref<INewGoods[]>([])
const newShopInfo = {
  title: '最新商铺',
  all: '查看全部'
}
const personInfo = reactive({
  title: '人才库',
  all: '查看全部'
})
const newGoodsLoading = ref<boolean>(false)
const personSore = ref<IPersonStore[]>([])
const recommendGoods = ref<ICardData[]>([])
const recommendTitle: string = "为你推荐"
const recommendLoading = ref<boolean>(false)
onMounted(async () => {
  const res = await getCarousel()
  banners.value = res.data
  const getGoos = await getNewGoods()
  if (getGoos.status === 200) {
    newGoodsLoading.value = true
    newGoods.value = getGoos.data
  }
  const getPerson = await getPersonStore()
  if (getPerson.status === 200) {
    personSore.value = getPerson.data
  }
  const getRecommendGoods = await getRecommend()
  if (getRecommendGoods.status === 200) {
    recommendLoading.value = true
    recommendGoods.value = getRecommendGoods.data
  }
})
const onItem = (val: number) => {
  console.log(val)
}
const onBeautyInfo = () => {
  router.push('/beauty')
}
</script>

<style scoped lang="less">
.nav {
  width: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
  clear: both;

  .nav-item {
    width: 20%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 40px;
      border-radius: 50%;
    }

    span {
      display: block;
      font-size: 12px;
      margin-top: 10px;
    }
  }
}

.info {
  background: #fff;
  display: flex;
  padding: 10px 0;
  align-items: center;
  border-top: 1px solid #f3f4f5;

  h3 {
    font-size: 14px;
    color: #999;
    font-weight: 400;
    padding: 0 20px;
    border-right: 1px solid #f3f4f5;
  }

  p {
    font-size: 14px;
    margin-right: 10px;
  }

  span {
    flex: 1;
    text-align: right;
    padding-right: 10px;
  }
}

.recommend {
  width: 100%;
  margin-top: 5px;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;

  div {
    flex: 1;
    height: 80px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hot {
    background: url("@/assets/images/home-cb1.png");
    background-position: center;
    background-size: cover;
    margin-right: 5px;
  }

  .opt {
    background: url("@/assets/images/home-cb2.png");
    background-position: center;
    background-size: cover;
    margin-left: 5px;
  }
}

.roll {
  background: #fff;

  .roll-header {
    height: 40px;
    line-height: 40px;
    display: flex;

    h3 {
      flex: 1;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      padding-left: 10px;
    }

    .all {
      flex: 1;
      text-align: right;
      font-size: 14px;
      color: #999;
      padding-right: 10px;

      span {
        font-size: 12px;
      }
    }
  }
}

.new-shop-content {
  display: flex;

  .new-shop-item {
    margin-right: 15px;

    img {
      display: block;
      width: 230px;
      height: 130px;
    }

    .new-shop-title {
      white-space: normal;
      word-break: break-word;
      font-size: 14px;
      text-align: left;
      padding: 10px;
    }

    .new-shop-price {
      display: block;
      font-size: 14px;
      width: 100%;
      text-align: left;
      padding: 10px;
      color: #820085;
    }
  }
}

.skeleton-new {
  height: 208px;
  width: 100%;
  display: flex;

  .skeleton-item {
    margin: 10px;
    width: 230px;

    .image {
      width: 230px;
    }
  }
}

.ad {
  background: #fff;
  margin: 5px auto;

  img {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
  }
}

.person-content {
  display: flex;

  .person-item {
    margin-left: 10px;

    img {
      width: 110px;
      height: 170px;
      border-radius: 5px;
    }

    p {
      font-size: 16px;
      margin: 5px 0;
    }

    span {
      display: block;
      font-size: 14px;
      color: #999;
      padding-bottom: 10px;
    }
  }
}
</style>